<template>
	<view class="zc">
		<view class="zc-data" style="background-image: url(/static/zc/bg.png)">
      <view class="zc-data-text">
        <p>欢迎注册</p>
        <p>杭州市红十字会</p>
      </view>
      <view class="zc-data-content">
        <view class="zc-data-content-a">
          <image src="/static/zc/icon1.png" class="zc-data-content-a-img"></image>
          <view class="ul">
            <view class="li">
             <view class="li-1">
               <view class="left">
                 <image src="/static/zc/1111.png" class="icon"></image>
                 <image src="/static/zc/df660722e4e36b747d2ffd603704d63.png" class="icon1"></image>
                 <text></text>
               </view>
               <u-input placeholder="请输入姓名"
               :custom-style="{
                 width: '139rpx',
                  fontSize: '28rpx',
                  fontFamily: 'SourceHanSansCN',
                  fontWeight: 400,
                  color: '#C1C1C1',
                  'text-indent':'31rpx'
               }"
                        v-model="name"
               />
             </view>
              <u-line color="rgba(132, 132, 132, 0.2)" />
            </view>
            <view class="li">
              <view class="li-1">
                <view class="left">
                  <image src="/static/zc/222.png" class="icon"></image>
                  <image src="/static/zc/df660722e4e36b747d2ffd603704d63.png" class="icon1"></image>
                  <text></text>
                </view>
                <u-input placeholder="请输入身份证号码"
                         v-model="idCode"
                         :custom-style="{
                 width: '139rpx',

                  fontSize: '28rpx',
                  fontFamily: 'SourceHanSansCN',
                  fontWeight: 400,
                  color: '#C1C1C1',
                  'text-indent':'31rpx'
               }"
                />
              </view>
              <u-line color="rgba(132, 132, 132, 0.2)" />
            </view>
            <view class="li">
              <view class="li-1">
                <view class="left">
                  <image src="/static/zc/444.png" class="icon"></image>
                  <image src="/static/zc/df660722e4e36b747d2ffd603704d63.png" class="icon1"></image>
                  <text></text>
                </view>
                <u-input placeholder="请输入手机号码"
                         v-model="phone"
                         :custom-style="{
                 width: '139rpx',

                  fontSize: '28rpx',
                  fontFamily: 'SourceHanSansCN',
                  fontWeight: 400,
                  color: '#C1C1C1',
                  'text-indent':'31rpx'
               }"
                         maxlength="11"
                />
              </view>
              <u-line color="rgba(132, 132, 132, 0.2)" />
            </view>
            <view class="li">
              <view class="li-1">
                <view class="left">
                  <image src="/static/zc/666.png" class="icon"></image>
                  <image src="/static/zc/df660722e4e36b747d2ffd603704d63.png" class="icon1"></image>
                  <text></text>
                </view>
                <u-input placeholder="请输入验证码"
                         v-model="code"
                         maxlength="6"
                         :custom-style="{
                 width: '139rpx',

                  fontSize: '28rpx',
                  fontFamily: 'SourceHanSansCN',
                  fontWeight: 400,
                  color: '#C1C1C1',
                  'text-indent':'31rpx'
               }"
                />
                <button type="default" plain hover-class="none"
                        :disabled="isSendCode"
                        @click="onSendCode"
                >
                  <view class="bgs" :class="isSendCode?'node':'auto'"></view>
                  <text :class="isSendCode?'node':'auto'">{{countText}}</text>
                </button>
              </view>
              <u-line color="rgba(132, 132, 132, 0.2)" />
            </view>
            <view v-if="isOk">
              <view class="li">
                <view class="li-1">
                  <view class="left name">
                    <text>地址</text>
                  </view>
                  <view class="operator">
                    <view class="address">
                      <text>请选择</text>
                      <text>请选择</text>
                      <text>请选择</text>
                    </view>
                    <image src="/static/zc/la.png" class="la"></image>
                  </view>
                </view>
                <u-line color="rgba(132, 132, 132, 0.2)" />
              </view>
              <view class="li">
                <view class="li-1">
                  <view class="left name">
                    <text>政治面貌</text>
                  </view>
                  <view class="operator">
                    <view class="address one">
                      <text>请选择</text>
                    </view>
                    <image src="/static/zc/la.png" class="la"></image>
                  </view>
                </view>
                <u-line color="rgba(132, 132, 132, 0.2)" />
              </view>
              <view class="li">
                <view class="li-1">
                  <view class="left name">
                    <text>职业</text>
                  </view>
                  <view class="operator">
                    <view class="address one">
                      <text>请选择</text>
                    </view>
                    <image src="/static/zc/la.png" class="la"></image>
                  </view>
                </view>
                <u-line color="rgba(132, 132, 132, 0.2)" />
              </view>
              <view class="li">
                <view class="li-1">
                  <view class="left name">
                    <text>头像</text>
                  </view>
                  <view class="operator">
                    <view class="address one">
                      <u-checkbox v-model="isUpload"
                                  name=""
                                  colors="#D2D2D2"
                                  active-color="#D2D2D2"
                      > <text>手动上传</text></u-checkbox>

                    </view>
                    <u-avatar :src="avater"></u-avatar>
                  </view>
                </view>
                <u-line color="rgba(132, 132, 132, 0.2)" />
              </view>
            </view>
          </view>
          <view class="ok">
            <view class="ok-1">
              <button>
                <text>注册</text>
              </button>
            </view>
            <view class="che">
              <u-checkbox v-model="isOk"
                          name=""
                          colors="#D2D2D2"
                          active-color="#D2D2D2"
              > <view class="okdb">
                注册成为 <text>红十字会志愿者</text>
              </view></u-checkbox>
            </view>
          </view>
        </view>

      </view>
    </view>
	</view>
</template>

<script>
import  loginMinxis from '@/minxis/login'
  export default {
    mixins:[loginMinxis],
    data() {
			return {
        avater:'',//头像
        name:'',//姓名
        idCode:'',//身份证号
        isUpload:false,//是否要上传
        isOk:false,//是否要注册为
			};
		}
	}
</script>

<style lang="scss" scoped>
.zc{
  width: 100%;
  height: 100%;
  &-data{
    width: 750rpx;
    height: 599rpx;
    opacity: 0.99;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 0px 0px 154rpx 0px;
    position: relative;
    &-text{
      height: 48rpx;
      font-size: 50rpx;
      font-family: SourceHanSansCN;
      font-weight: bold;
      color: #FFFFFF;
      position: absolute;
      top:147rpx;
      left:106rpx;
      p{
        &:last-child{
          height: 38rpx;
          font-size: 40rpx;
          font-family: SourceHanSansCN;
          font-weight: 500;
          color: #FFFFFF;
          padding-top: 42rpx;
        }
      }
    }
    &-content{
      position: absolute;
      top:311rpx;
      margin-top: 31rpx;
      width: 100%;
      padding: 0 36rpx;

      &-a{
        height: 1169rpx;
        margin-bottom: 76rpx;
        background: #FFFFFF;
        border-radius: 31rpx;
        position: relative;
        &-img{
          width: 228rpx;
          height: 251rpx;
          position: absolute;
          top:-209rpx;
          right:11rpx;
        }
        .ul{
          padding-top: 49rpx;
          .li{

            height:110rpx;
            line-height: 110rpx;
            padding: 0 52rpx 0 45rpx;
            .li-1{
              display: flex;
              align-items: center;
              .left{
                padding-left:17rpx;
                position: relative;
                .icon{
                  width: 31rpx;
                  height: 34rpx;
                }
                .icon1{
                  width: 13rpx;
                  height: 12rpx;
                  margin: 0 9rpx 0 5rpx;
                  display: inline-block;
                  position: relative;
                  top:-31rpx;
                }
                text{
                  position: relative;
                  display: inline-block;
                  &:before {
                    content: '';
                    width: 1px;
                    height: 18rpx;
                    background: #000000;
                    opacity: 0.22;
                    display: inline-block;
                  }
                }
              }
              .name{
                text{
                  width: 114rpx;
                  height: 27rpx;
                  font-size: 28rpx;
                  font-family: SourceHanSansCN;
                  font-weight: 400;
                  color: #444444;
                }
              }
              .operator{
                display: flex;
                align-items: center;
                flex: 1;
                .address{
                  flex: 1;
                  text{
                    width:33%;
                    display: inline-block;
                    height: 27rpx;
                    font-size: 28rpx;
                    font-family: SourceHanSansCN;
                    font-weight: 400;
                    color: #C1C1C1;
                    white-space: nowrap;
                  }
                  /deep/.u-checkbox__icon-wrap{
                    background-color: #fff !important;
                    .u-icon{
                      .u-icon__icon{
                        height: 7rpx;
                        color: #D2D2D2;
                        //background: transparent;
                      }
                    }
                  }
                  .up{
                    width: 18rpx;
                    height: 18rpx;
                    border: 1rpx solid #D2D2D2;
                    margin-right: 19rpx;
                    position: relative;
                    &:before{
                      content: '';
                      position: absolute;
                      width: 11rpx;
                      height: 14rpx;
                      border-color: #D2D2D2;
                      border-style: solid;
                      border-width: 0 3rpx 5rpx 0;
                      transform: rotate(45deg);
                    }
                  }
                }
                .one{
                  padding-left: 78rpx;
                }
                .la{
                  width: 30rpx;
                  height: 16rpx;
                }

              }
              button{
                width: 167rpx;
                height: 49rpx;
                line-height: 49rpx;
                margin-right:17rpx;
                border-radius: 5rpx;
                font-size: 26rpx;
                position: relative;
                border: transparent;
                border-color: rgba(81, 117, 255, 0.22);
                padding: 0;
                .bgs{
                  background: #5175FF;
                  opacity: 0.1;
                  width:100%;
                  height: 100%;
                }
                text{
                  position:absolute;
                  z-index:10;
                  width: 132rpx;
                  font-size: 26rpx;
                  font-family: SourceHanSansCN;
                  font-weight: 400;
                  color: #5175FF;
                  left: 50%;
                  top:0;
                  transform: translate(-50%,0);
                }
              }
            }

           /deep/ u-input{

           }
          }
        }
        .ok{
          margin-bottom: 30rpx;
          .ok-1{
            display: flex;
            justify-content: center;
            button {
              margin: 42rpx 0 40rpx 0;
              width: 548rpx;
              height: 85rpx;
              background: linear-gradient(-45deg, #4F73FF 0%, #6181FF 100%);
              box-shadow: 0px 6rpx 10rpx 0px rgba(22, 121, 253, 0.28);
              border-radius: 18rpx;
              text{
                width: 76rpx;
                height: 34rpx;
                font-size: 36rpx;
                font-family: SourceHanSansCN;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 78rpx;
              }
            }
          }
          .che{
            text-align: center;
            .okdb{
              white-space: nowrap;
              padding-left: 10rpx;
              font-size: 20rpx;
              font-family: SourceHanSansCN;
              font-weight: 400;
              color: #666666;
              text{

              color:rgba(243, 66, 66, 1)
              }
            }
          }
          /deep/.u-checkbox__icon-wrap{
            background-color: #fff !important;
            .u-icon{
              .u-icon__icon{
                height: 7rpx;
                color: #D2D2D2;
                //background: transparent;
              }
            }
          }
        }
      }
    }
  }
}
</style>
